<template>
	<view @click="startmonthChoose()">
		<slot></slot>
	</view>
	<myPopupVue ref="isMonthSelector" type="bottom" :takeStyle="tagChooseStyle">
		<view class="monthSelector" :style="'padding-bottom: ' + (props.haveTabbar ? 'var(--window-bottom)':'0.5em') + ';'">
			<view class="monthSelector_top">
				<view class="monthSelector_top_mainTime">
					{{showTheMonthT}}
				</view>
				<view class="monthSelector_top_confirm" @click="overMonthChoose()">
					确认
				</view>
			</view>
			<picker-view :value="showTheMonth" class="monthSelector_main" @change="choosemonth"
				mask-style="display:none" indicator-class="monthSelector_main_item_active">
				<picker-view-column>
					<view class="monthSelector_main_item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="monthSelector_main_item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
			</picker-view>
		</view>
	</myPopupVue>
</template>

<script setup>
	import myPopupVue from "@/components/base/myPopup.vue";
	import {
		dateTypeFormat
	} from "@/uitls/tool.js"
	import {
		ref,
		watch
	} from "vue"
	import store from "@/store/index.js"
	const tagChooseStyle = {
		borderBottomRightRadius: "0px",
		borderBottomLeftRadius: "0px",
		borderBottom: "none",
		borderLeft: "none",
		borderRight: "none",
	}
	const props = defineProps({
		baseTime: String,
		haveTabbar: {
			type: Boolean,
			default: true
		}
	})
	const baseTimeDate = ref()
	watch(() => props.baseTime, (n) => {
		baseTimeDate.value = new Date(props.baseTime)
	}, {
		immediate: true
	})
	const years = Array.from({
		length: 11
	}, (_, i) => new Date().getFullYear() + i - 5)
	const months = Array.from({
		length: 12
	}, (_, i) => i + 1)

	const showTheMonth = ref([years.indexOf(baseTimeDate.value.getFullYear()), parseInt(baseTimeDate.value.getMonth())])
	const showTheMonthT = ref(`${years[showTheMonth.value[0]]}-${months[showTheMonth.value[1]]}`)
	const isMonthSelector = ref()
	const startmonthChoose = () => {
		isMonthSelector.value.open()
		showTheMonth.value = [years.indexOf(baseTimeDate.value.getFullYear()), baseTimeDate.value.getMonth()]
		showTheMonthT.value = `${years[showTheMonth.value[0]]}-${months[showTheMonth.value[1]]}`
	}
	const choosemonth = (e) => {
		showTheMonth.value = e.detail.value
		let selectedYear = years[showTheMonth.value[0]]
		let selectedMonth = months[showTheMonth.value[1]]
		showTheMonthT.value = selectedYear + "-" + selectedMonth
	}

	const emit = defineEmits(['overMonthChoose'])
	const overMonthChoose = () => {
		isMonthSelector.value.close()
		let addmonth = months[showTheMonth.value[1]] < 10 ? '0' + months[showTheMonth.value[1]] : months[showTheMonth
			.value[1]]
		// 子组件 向父组件传值
		emit('overMonthChoose', years[showTheMonth.value[0]] + "-" + addmonth)
	}
</script>

<style lang="scss" scoped>
	@import "@/style/base.scss";

	.monthSelector {
		height: 50vh;
		padding: 0.5em 1em;
		left: 0;
		right: 0;
		z-index: 99;
		display: flex;
		flex-direction: column;
		color: $baseBlack;

		&_top {
			position: relative;
			color: $baseBlack_mid;
			height: 2em;
			display: flex;
			justify-content: center;
			align-items: center;

			&_mainTime {
				display: flex;
				justify-content: center;
				align-items: center;
				letter-spacing: 0.1em;
				font-weight: bold;
			}

			&_confirm {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translate(-50%, -50%);
				font-weight: bold;
			}
		}

		&_main {
			flex: 1;

			&_item {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			::v-deep .monthSelector_main_item_active {
				border-bottom: $baseColorBorder;
				border-top: $baseColorBorder;
			}
		}
	}
</style>